<template>
  <div class="main">
    <u-navbar
      :background="{ backgroundColor: 'rgb(61, 95, 255)' }"
      title="生产情况"
      back-icon-color="#fff"
      title-color="#fff"
    />
    <u-tabs
      :list="list"
      is-scroll
      :current="current"
      @change="change"
      active-color="rgb(1, 72, 51)"
      inactive-color="rgb(153, 153, 153)"
    ></u-tabs>
    <scroll-view
      :scroll-into-view="toView"
      scroll-with-animation
      scroll-y
      class="content"
      @scroll="handleScroll"
    >
      <div class="city-box m-b-10" v-if="countNoShow">
        <div class="city-input">
          <u-input
            v-model="searchData.cityStr"
            placeholder="请选择"
            type="select"
            @click="cityShow = true"
            :select-open="cityShow"
          />
        </div>
      </div>
   <coalStatistics :countyNo="countyNo" :customerList="customerList"></coalStatistics>
      <div id="view1">
        <u-card
          box-shadow="0px 0px 8px #ddd6d6"
          :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }"
          :head-border-bottom="false"
          class="u-m-0 u-m-t-20"
        >
          <view slot="head">
            <view class="u-flex head">
              <u-section
                title="生产日报"
                color="rgb(1, 72, 51)"
                font-size="30"
                :right="false"
              ></u-section>
            </view>
          </view>
          <view slot="body">
            <div class="sctb-box">
              <div class="sctb-card">
                <div class="sctb-item-box">
                  <div class="gzm-item">
                    <div>
                      <span class="val">{{ produceInfo.dayDrivingLength }}</span
                      ><span class="unit">米</span>
                    </div>
                    <div>日进尺</div>
                  </div>
                  <div class="gzm-item">
                    <div>
                      <span class="val">{{
                        produceInfo.monthDrivingLength
                      }}</span
                      ><span class="unit">米</span>
                    </div>
                    <div>月累计进尺</div>
                  </div>
                  <div class="gzm-item">
                    <div>
                      <span class="val">{{
                        produceInfo.yearDrivingLength
                      }}</span
                      ><span class="unit">米</span>
                    </div>
                    <div>年累计进尺</div>
                  </div>
                </div>
              </div>

              <div class="sctb-card u-m-t-20">
                <div class="sctb-item-box">
                  <div class="gzm-item">
                    <div>
                      <span class="val">{{ produceInfo.dayCoalYield }}</span
                      ><span class="unit">万吨</span>
                    </div>
                    <div>日产量</div>
                  </div>
                  <div class="gzm-item">
                    <div>
                      <span class="val">{{ produceInfo.monthCoalYield }}</span
                      ><span class="unit">万吨</span>
                    </div>
                    <div>月累计产量</div>
                  </div>
                  <div class="gzm-item">
                    <div>
                      <span class="val">{{ produceInfo.yearCoalYield }}</span
                      ><span class="unit">万吨</span>
                    </div>
                    <div>年累计产量</div>
                  </div>
                </div>
              </div>
            </div>
          </view>
        </u-card>
      </div>
      <div id="view2">
        <u-card
          box-shadow="0px 0px 8px #ddd6d6"
          :body-style="{ padding: '0 ' }"
          :head-style="{ padding: '28rpx 30rpx 20rpx' }"
          :head-border-bottom="false"
          class="u-m-0 u-m-t-20"
        >
          <view slot="head">
            <view class="u-flex head">
              <u-section
                title="计划完成情况"
                color="rgb(1, 72, 51)"
                font-size="30"
                :right="false"
              ></u-section>
            </view>
          </view>
          <view slot="body">
            <u-tabs
              :list="listMonth1"
              is-scroll
              :current="currentJih"
              @change="changeJih"
              active-color="rgb(1, 72, 51)"
              inactive-color="rgb(153, 153, 153)"
              font-size="24"
            ></u-tabs>

            <div class="gzmqk jhsc-body">
              <div class="jhsc-title u-p-20">原煤生产</div>

              <div class="jhsc-box">
                <div class="gzm-box">
                  <div class="jhsc-name">计划</div>

                  <div class="gzm-item-bg">
                    <div>
                      <span class="val">{{ planAndProduce.cmYearPlan }}</span
                      ><span class="unit">万吨</span>
                    </div>
                    <div>年计划</div>
                    <u-line class="u-m-20"></u-line>
                    <div>
                      <span class="val">{{ planAndProduce.cmMonthPlan }}</span
                      ><span class="unit">万吨</span>
                    </div>
                    <div>月计划</div>
                  </div>
                </div>

                <div class="gzm-box gzm-box-kg">
                  <div class="jhsc-name">完成</div>

                  <div class="gzm-item-bg">
                    <div>
                      <span class="val">{{
                        planAndProduce.cmYearCoalYield
                      }}</span
                      ><span class="unit">万吨</span>
                    </div>
                    <div>年累计完成</div>
                    <u-line class="u-m-20"></u-line>
                    <div>
                      <span class="val">{{
                        planAndProduce.cmMonthCoalYield
                      }}</span
                      ><span class="unit">万吨</span>
                    </div>
                    <div>月累计完成</div>
                  </div>
                </div>
              </div>
            </div>

            <trendJj chartNameType="1" />

            <div class="gzmqk jhsc-body">
              <div class="jhsc-title u-p-20">掘进进尺</div>

              <div class="jhsc-box">
                <div class="gzm-box">
                  <div class="gzm-title">计划</div>

                  <div class="gzm-item-bg">
                    <div>
                      <span class="val">{{ planAndProduce.jjYearPlan }}</span
                      ><span class="unit">米</span>
                    </div>
                    <div>年计划</div>
                    <u-line class="u-m-20"></u-line>
                    <div>
                      <span class="val">{{ planAndProduce.jjMonthPlan }}</span
                      ><span class="unit">米</span>
                    </div>
                    <div>月计划</div>
                  </div>
                </div>

                <div class="gzm-box gzm-box-kg">
                  <div class="gzm-title">完成</div>

                  <div class="gzm-item-bg">
                    <div>
                      <span class="val">{{
                        planAndProduce.jjYearDrivingLength
                      }}</span
                      ><span class="unit">米</span>
                    </div>
                    <div>年累计完成</div>
                    <u-line class="u-m-20"></u-line>
                    <div>
                      <span class="val">{{
                        planAndProduce.jjMonthDrivingLength
                      }}</span
                      ><span class="unit">米</span>
                    </div>
                    <div>月累计完成</div>
                  </div>
                </div>
              </div>
            </div>

            <trendJj chartNameType="2" />
          </view>
        </u-card>
      </div>
    </scroll-view>
    <u-picker
      mode="selector"
      v-model="cityShow"
      :range="cityList"
      @confirm="cityConfirm"
      range-key="label"
    ></u-picker>
  </div>
</template>

<script>
import coalStatistics from "../components/coalStatistics.vue";
import trendJj from "@/pages/cjt/basicInformation/trendJj/index.vue";
export default {
  components: { coalStatistics, trendJj },
  data() {
    return {
      list: [{ name: "生产日报" }, { name: "计划完成情况" }],
      current: 0,
      toView: "",
      cityShow: false,
      cityList: [],
      countNoShow: false,
      countyNo: "",
      searchData: {},
      customerList: [],
      produceInfo: {},
      planAndProduce: {},
      listMonth1: [
        { name: "1月" },
        { name: "2月" },
        { name: "3月" },
        { name: "4月" },
        { name: "5月" },
        { name: "6月" },
        { name: "7月" },
        { name: "8月" },
        { name: "9月" },
        { name: "10月" },
        { name: "11月" },
        { name: "12月" },
      ],
      currentJih: 0,
    };
  },
  async onLoad() {
    this.currentJih = new Date().getMonth();
    if (getApp().globalData.userInfo.superviseLevel === "40") {
      this.countNoShow = true;
    }
    // 获取区县
    this.getCityList();
  },
  methods: {
    goMineList() {
      uni.navigateTo({
        url: `/pages/cjt/basicInformation/mineList/index?countyNo=${this.countyNo}`,
      });
    },
    init() {
      // 获取煤矿
      this.getCustomerList();
      // 获取生产填报信息
      this.getCustomerProduceInfo();
      let num = 0;
      if (this.currentJih < 9) {
        num = "0" + (this.currentJih + 1);
      } else {
        num = this.currentJih + 1;
      }
      this.planAndProduceByMonth(
        { countyNo: this.countyNo },
        new Date().getFullYear() + "-" + num
      );
    },
    planAndProduceByMonth(item, month) {
      this.$post("/cjt/app/planAndProduceByMonth", {
        // countyNo: item.countyNo,
        month: month,
      }).then((res) => {
        this.planAndProduce = res.body;
      });
    },
    changeJih(index) {
      this.currentJih = index;
      let num = 0;
      if (this.currentJih < 9) {
        num = "0" + (this.currentJih + 1);
      } else {
        num = this.currentJih + 1;
      }
      this.planAndProduceByMonth(
        { countyNo: this.countyNo },
        new Date().getFullYear() + "-" + num
      );
    },
    getCustomerList() {
      // this.$get("/cjt/common/getCustomerList?countyNo=" + this.countyNo).then(
      this.$get("/cjt/common/getCustomerList").then(
        (res) => {
          this.customerList = res.body;
        }
      );
    },
    change(index) {
      this.current = index;
      this.toView = `view${index + 1}`;
    },
    getCustomerProduceInfo() {
      this.$post("/cjt/app/getCustomerProduceInfo", {
        // countyNo: this.countyNo,
      }).then((res) => {
        this.produceInfo = res.body;
      });
    },
    getCityList() {
      this.$get("/cjt/common/app/getCountyList").then((res) => {
        this.cityList = res.body;
        this.searchData.cityStr = res.body[0].label;
        this.countyNo = this.cityList[0].id;
        this.init();
      });
    },
    cityConfirm(index) {
      this.searchData.cityStr = this.cityList[index].label;
      this.countyNo = this.cityList[index].id;
      this.init();
    },
    handleScroll({ detail }) {
      // 112 是scroll-view到顶部的距离
      const query = uni.createSelectorQuery().in(this);
      query
        .select("#view1")
        .boundingClientRect((res) => {
           if (res.bottom - 250 > 0 && res.top - 250 < 0) {
            this.current = 0;
          }
        })
        .exec();
      query
        .select("#view2")
        .boundingClientRect((res) => {
          if (res.bottom - 112 > 0 && res.top - 112 < 0) {
            this.current = 1;
          }
        })
        .exec();
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  padding: 20rpx;
  flex: 1;
  overflow: auto;
  box-sizing: border-box;
}

.city-box {
  // display: grid;
  // grid-template-columns: 110px auto;
  // grid-column-gap: 10px;

  .city-input {
    background: rgba(0, 0, 0, 0.03);
    height: 35px;
    padding: 5px 10px;
    border-radius: 4px;
  }

  .mine-num {
    text-align: center;
    width: 100%;
    height: 45px;
    background: #fff;
    line-height: 40px;
  }

  .mine-num-val {
    color: rgb(61, 95, 255);
    font-size: 16px;
    margin-left: 10px;
    position: relative;
    top: 1px;
  }
}

.head {
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid #f6f6f6;
}

.gzmqk {
  background: linear-gradient(rgb(243, 247, 255), rgba(255, 255, 255, 0));
  border-radius: 6px 6px 0 0;
}

.gzm-box {
  background: linear-gradient(
    rgba(10, 207, 151, 0.5),
    rgba(167, 238, 217, 0.5)
  );
  margin: 10px;
  margin-top: 0;
  border-radius: 6px;
  padding-bottom: 3px;

  .gzm-item-bg {
    padding-top: 10px;
    background: #fff;
    margin-left: 3px;
    margin-right: 3px;
    padding-bottom: 10px;
    border-radius: 6px;

    .gzm-item-box {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      background: rgba(207, 207, 207, 0.5);
      grid-column-gap: 1px;

      .gzm-item {
        text-align: center;
        background: #fff;
        padding-top: 10px;
        padding-bottom: 10px;

        .gzm-name {
          font-size: 12px;
          margin-top: 10px;
        }
      }
    }

    .gzm-item-box1 {
      grid-template-columns: 1fr 1fr;
    }

    .gzm-item-box2 {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
}

.gzm-box-zt {
  background: linear-gradient(rgba(210, 158, 8, 0.5), rgba(239, 220, 166, 0.5));
}

.gzm-box-kg {
  background: linear-gradient(rgb(204, 239, 255), rgba(224, 249, 255, 0.85));
}

.gzm-box-jx {
  background: linear-gradient(rgb(255, 158, 80), rgb(254, 177, 51));
}

.gzm-box-lj {
  background: linear-gradient(rgba(255, 191, 60, 0.5), rgba(255, 191, 60, 0.5));
}

.gzm-title {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.gzmqk-hc {
  background: linear-gradient(rgb(255, 250, 242), rgba(255, 250, 242, 0));
}
.mineBox {
  background: #fff;
  padding: 10px;
  border-radius: 4px;
  text-align: center;
  .mine-num-val {
    color: rgb(61, 95, 255);
    font-size: 16px;
    margin-left: 10px;
  }
}
.sctb-box {
  padding: 10px;
  padding-top: 0;

  .sctb-card {
    box-shadow: 0 0 10px 0 rgba(1, 72, 51, 0.2) !important;
    border-radius: 6px !important;
    padding: 10px;
    background: #fff;

    .sctb-item-box {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      background: rgba(207, 207, 207, 0.5);
      grid-column-gap: 1px;

      .gzm-item {
        text-align: center;
        background: #fff;

        .val {
          font-size: 20px;
          font-weight: 700;
          margin-right: 0.2em;
          color: #333;
        }
      }
    }

    .gzm-item-box1 {
      grid-template-columns: 1fr 1fr;
    }

    .gzm-item-box2 {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
}
.jhsc-body {
  .gzm-box {
    margin: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
  .jhsc-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
  }
  .jhsc-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 10px;
    padding: 10px;
    padding-top: 0;

    .jhsc-title {
      font-size: 15px;
      font-weight: 500;
    }

    .val {
      font-size: 20px;
      font-weight: 700;
      margin-right: 0.2em;
      color: #333;
    }

    .jhsc-name {
      padding: 10px;
      text-align: center;
      font-size: 15px;
      font-weight: 500;
      color: #333;
    }
  }
}

</style>
